<template>
  <div class="home">
    <Breadcrumb :list="list"></Breadcrumb>
    <div class="nav">
      <span>您好, {{ token.username }}</span>
      <p>您的角色:{{ token.userID === 0 ? "访客" : "管理员" }}</p>
    </div>
    <div id="chart" style="width: 100%; height: 400px"></div>
    <div class="quickly_nav">
      <p>快速导航</p>
     <div>
        <router-link v-for="(v,i) in LayoutChildren" :key="i" :to="v.path">
      {{v.meta?.title}}
      </router-link>
     </div>
    </div>
    <div class="new-articles">
      <p>
        <span> 最新文章 </span>
        <span @click="toArticles">全部文章</span>
      </p>
      <div class="pic">
        <dl
          v-for="(v, i) in articlesData"
          :key="i"
          @mouseover="changeShadow(i)"
          :class="{ boxShadow: isActive === i }"
        >
          <dt v-if="v.id <= 6"><img :src="v.img" alt="" /></dt>
          <dd v-if="v.id <= 6">
            {{ v.headline }}
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Breadcrumb from "../../components/Breadcrumb/index.vue";
import {LayoutChildren} from "../../router"
import { ref, onMounted } from "vue";
import { fetchList } from "../../api/all-articles";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
import {DataItem} from "@/interface"
const list = ref<string[]>(["工作台"]);
const token = JSON.parse(localStorage.getItem("token") as string);
//鼠标滑过事件添加阴影
const isActive = ref(0);
const changeShadow = (i: number) => {
  isActive.value = i;
};
const router = useRouter();
const articlesData = ref<DataItem[]>();
const toArticles = () => {
  router.push({ path: "/article/allArticles" });
};
const getList = async () => {
  let resp = await fetchList();
  articlesData.value = resp.data.data;
};
const getEcharts = () => {
  var myChart = echarts.init(
    document.getElementById("chart") as HTMLDivElement
  );
  const option = {
    title: {
      text: "每周用户访问指标",
    },
    legend: {
      data: ["评论数", "访问量"],
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {},
    series: [
      {
        data: [350, 300, 350, 350, 150, 100, 160],
        type: "line",
        color: "black",
        name: "访问量",
      },
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        color: "red",
        name: "评论数",
      },
    ],
  };
  myChart.setOption(option);
};
onMounted(() => {
  getEcharts();
  getList();
});
</script>

<style scoped lang="scss">
.home {
  padding-bottom: 50px;
}
#chart {
  margin-top: 20px;
  border-top: 1px solid #dddddd;
  background: white;
}
.quickly_nav{
  background: white;
  margin-top: 20px;
  p{
    padding: 10px;
    border-bottom: 1px solid #dddddd;
  }
  div{
    padding: 20px 0;
    display: flex;
    justify-content: space-around;
  }
  a{
    color: black;
    padding: 30px 20px;
  }
}
.nav {
  background: white;
  padding: 10px 20px;
  span {
    font-weight: 600;
    font-size: 40px;
  }
}
.new-articles {
  width: 100%;
  height: 500px;
  background: white;
  margin-top: 20px;
  p {
    padding: 10px;
  }
  p span:nth-child(2) {
    margin-left: 90%;
  }
  .pic {
    display: flex;
    flex-wrap: wrap;
  }
  dl {
    border: 1px solid #dddddd;
    img {
      width: 520px;
      height: 200px;
    }
    dd {
      text-align: center;
    }
  }
}
.boxShadow {
  width: 530px;
  height: 240px;
  box-shadow: 0 0 8px #000;
  z-index: 99;
}
</style>
